import React, { FC, PureComponent } from "react";
import {
  PieChart,
  Pie,
  Legend,
  Cell,
  Tooltip,
  ResponsiveContainer,
} from "recharts";
import { PIE_COLORS } from "../../../constant";

const PieDemo: FC = () => {
  const data01 = [
    { name: "Group A", value: 400 },
    { name: "Group B", value: 300 },
    { name: "Group C", value: 300 },
    { name: "Group D", value: 200 },
    { name: "Group E", value: 278 },
    { name: "Group F", value: 189 },
  ];

  return (
    <div style={{ width: "300px", height: "400px" }}>
      <ResponsiveContainer width="100%" height="100%">
        <PieChart width={400} height={400}>
          <Pie
            dataKey="value"
            isAnimationActive={false}
            data={data01}
            cx="50%" //x轴的偏移量
            cy="50%" //Y轴的偏移量
            outerRadius={50} //直径
            fill="#8884d8"
            label={(i) => `${i.name}_${i.value}`}
          >
            {data01.map((i, index) => {
              return <Cell key={index} fill={PIE_COLORS[index]} />;
            })}
          </Pie>
          <Tooltip />
        </PieChart>
      </ResponsiveContainer>
    </div>
  );
};

export default PieDemo;
